<template>
  <view class="container">
    <view class="top-bg">
      <view class="return" @click="goToBack()">
        <u-icon name="arrow-left" color="#ffffff " bold="true" size="38"></u-icon>
      </view>
      用户中心
    </view>
    <view class="title">
      <view class="" style="display: flex;align-items: center;">
        <!-- <view class="" @click="onChooseAvatar">
				<u-avatar v-if="avatar" :src="avatar" size="120"></u-avatar>
				<image v-else class="img-avatar" src="@/static/yunwei/avatar.png" mode=""></image>
			</view> -->
        <button class="avatar-wrap" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
          <!-- <image v-if="avatar" class="img-avatar" :src="avatar" mode=""></image> -->
          <u-avatar v-if="avatar" :src="avatar" size="120"></u-avatar>
          <image v-else class="img-avatar" src="@/static/yunwei/avatar.png" mode=""></image>
        </button>
        <view class="userInfo">
          <view class="name">{{realname}}<view class="label">{{ role === 2 ? '管理':'运维' }}</view>
          </view>
          <view class="account">手机号:{{ phone }}</view>
        </view>
      </view>
      <view v-if="role === 1" class="" style="margin-top: 40rpx;">
        <image src="@/static/icon/ywqy-icon.png" class="icon1"></image>
        运维企业：{{enName}}
      </view>
    </view>
    <view class="omBox" v-if="role === 1">
      <view class="omTitle">运维数据统计</view>
      <view class="" style="display: flex;align-items: center;">
        <view class="" style="text-align: center;">
          <view class="count" style="color: #09C4AB;">{{operatorObj.villageCount}}个</view>
          <view class="">运维村庄</view>
        </view>
        <view class="line"></view>
        <view class="" style="text-align: center;">
          <view class="count" style="color: #FA9049;">{{operatorObj.terminalCount}}个</view>
          <view class="">运维终端</view>
        </view>
        <view class="line"></view>
        <view class="" style="text-align: center;">
          <view class="count" style="color: #61BDFB;">{{operatorObj.omCount}}次</view>
          <view class="">运维总次数</view>
        </view>
        <view class="line"></view>
        <view class="" style="text-align: center;">
          <view class="count" style="color: #7B9CE3;">{{operatorObj.omRate}}次/月</view>
          <view class="">运维频率</view>
        </view>
      </view>
    </view>
    <view style="width: 100%; height: 96rpx; position:absolute; bottom: 265rpx;">
      <view style="padding: 0 88rpx; text-align: center;margin-bottom: 10rpx;">
        <u-button text="修改密码"
          customStyle="height: 96rpx; border-radius:10rpx; color:#989898; font-size: 36rpx;background: #EBEBEB;font-weight: bold;"
          @click="changePassword"></u-button>
      </view>
      <view style="padding: 0 88rpx; text-align: center;">
        <u-button text="退出登录"
          customStyle="height: 96rpx; border-radius:10rpx; color:#fff; font-size: 36rpx;background: #3C8AFF;font-weight: bold;"
          @click="loginOut"></u-button>
      </view>
    </view>
  </view>
</template>

<script>
import { reset_token, get_token } from "@/auth/token";
import { getOperatorCount } from "@/api/yunwei.js";
import { putModifyAvatar } from "@/api/system.js";

import {
  BaseUrl
} from '@/config/const.js'
export default {
  data() {
    return {
      phone: null,
      realname: null,
      avatar: '',
      enName: '',
      role: '',
      operatorObj: {}
    };
  },
  onLoad(e) {
    if (e.name) {
      this.enName = e.name
    }
    const _this = this
    uni.getStorage({
      key: 'phone',
      success: function (res) {
        _this.phone = res.data
      }
    });
    this.realname = uni.getStorageSync('realname')
    this.avatar = uni.getStorageSync('avatar')
  },
  onShow() {
    //⭐隐藏pages.json里配置的导航栏，使用封装的tabbar组件
    // uni.hideTabBar({
    //   animation: false
    // })
    this.role = uni.getStorageSync('role')

  },
  onReady() {
    if (this.role === 1) this.getOperatorCount()
  },
  methods: {
    loginOut() {
      reset_token()
      uni.reLaunch({
        url: '/pages/login/login'
      });
    },
    goToBack() {
      // wx.navigateBack({
      //     delta: 1
      //   });
      uni.navigateTo({
        url: '/pages/home/home'
      })
    },
    changePassword() {
      uni.navigateTo({
        url: '/pages/mine/changePassword'
      })
    },
    async getOperatorCount() {
      let userId = uni.getStorageSync('userId')
      const res = await getOperatorCount({
        id: userId
      })
      this.operatorObj = res.data.result
      // console.log(res.data);
    },
    onChooseAvatar(res) {
      const { detail } = res
      this.upload_file(detail.avatarUrl)
      this.avatar = detail.avatarUrl
    },
    upload_file(e) {
      wx.showLoading({
        title: '上传中'
      })
      let self = this
      wx.uploadFile({
        url: BaseUrl + `/ps/common/upload?type=1`,
        filePath: e, //图片路径
        name: 'file',
        header: {
          'Content-Type': 'multipart/form-data',
          'X-Access-Token': get_token()
        },
        success: function (a) {
          let res = a.data
          res = JSON.parse(res)
          if (res.code == 200) {
            self.putModifyAvatar(res.result)
          }
          wx.hideLoading()
          wx.showToast({
            title: '上传成功',
            icon: 'success',
            duration: 2000
          })
        },
        fail: function (a) {
          wx.hideLoading()
          wx.showToast({
            title: '上传失败',
            icon: 'none',
            duration: 2000
          })
        }
      })
    },
    async putModifyAvatar(url) {
      const HBusername = uni.getStorageSync('HBusername');
      const HBpassword = uni.getStorageSync('HBpassword');
      const avatarRes = await putModifyAvatar({
        username: HBusername,
        password: HBpassword,
        avatar: url
      });
      if (avatarRes.data.code == 200) {
        uni.showToast({
          title: avatarRes.data.message,
          icon: "success",
          duration: 2000,
        });
        uni.setStorageSync('avatar', url);
      }
      else {
        uni.showToast({
          title: avatarRes.data.message,
          icon: "none",
          duration: 2000,
        });
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  height: calc(100vh - 220rpx);
  overflow: scroll;
  // position: relative;
}
.top-bg {
  width: 100%;
  height: 330rpx;
  background: #2769f7;
  border-radius: 0rpx 0rpx 140rpx 140rpx;
  padding-top: 104rpx;
  text-align: center;
  font-weight: 600;
  font-size: 40rpx;
  color: #ffffff;
  letter-spacing: 4rpx;
  position: relative;
  .return {
    position: absolute;
    left: 32rpx;
    margin-top: 8rpx;
  }
}
.tabbarBg {
  width: 100%;
  height: 400rpx;
  position: absolute;
  left: 0;
  top: 0;
}
.title {
  width: 630rpx;
  height: 242rpx;
  background: linear-gradient(315deg, #e8f1fc 0%, #ecf3fc 100%);
  border-radius: 20rpx 20rpx 20rpx 20rpx;
  position: absolute;
  left: 32rpx;
  top: 180rpx;
  padding: 40rpx 32rpx;
  font-weight: bold;
  font-size: 24rpx;
  color: #5e5e5e;
  letter-spacing: 2rpx;
  .userInfo {
    margin-left: 20rpx;
  }
  .img-avatar {
    width: 120rpx;
    height: 120rpx;
    vertical-align: middle;
  }
  .name {
    font-size: 36rpx;
    color: #292929;
    display: flex;
    align-items: center;
    .label {
      width: 116rpx;
      height: 76rpx;
      background: url('@/static/icon/yunwei-bg.png') no-repeat center;
      background-size: 100% 100%;
      line-height: 64rpx;
      text-align: center;
      margin-left: 20rpx;
      font-size: 24rpx;
      color: #ffffff;
      margin-top: 10rpx;
    }
  }
  .account {
    font-weight: 400;
    font-size: 24rpx;
    color: #747474;
    margin-top: 12rpx;
  }
  .icon1 {
    width: 20rpx;
    height: 20rpx;
    vertical-align: middle;
    margin-right: 16rpx;
    margin-left: 40rpx;
  }
}
.omBox {
  width: 642rpx;
  height: 173rpx;
  background: url('@/static/yunwei/omCount_bg.png') no-repeat center;
  background-size: 100% 100%;
  position: absolute;
  left: 32rpx;
  top: 520rpx;
  padding: 26rpx;
  font-weight: 400;
  font-size: 26rpx;
  color: #4a4a4a;
  .line {
    width: 2rpx;
    height: 32rpx;
    background: #2769f7;
    opacity: 0.18;
    margin: 0 22rpx;
  }
  .omTitle {
    font-weight: 800;
    font-size: 32rpx;
    color: #4a4a4a;
    margin-bottom: 32rpx;
  }
  .count {
    font-weight: 800;
    margin-bottom: 16rpx;
  }
}

button::after {
  border-top: none;
  border-left: none;
  border-right: none;
  border-bottom: none;
  border-radius: 0;
}
.avatar-wrap {
  border: 0;
  background-color: transparent;
  margin: 0;
  padding: 0;
}
</style>
